<template>
  <div style="min-height: 100vh;background:#f5f5f5;" class="addAddress">
    <ul>
      <li><span>姓名</span><input type="text" v-model.lazy="name" placeholder="收货人姓名"></li>
      <li><span>电话</span><input type="number" v-model.lazy="phone" maxlength="11" placeholder="收货人手机号"></li>
      <li><span>地区</span> <input type="text" disabled v-model.lazy="area" @click="areaSelect" placeholder="选择省/市/区"></li>
      <li><span>详细地区</span><input type="text" v-model="detail" placeholder="街道楼层,楼层房间号等信息"></li>
    </ul>
    <div style="clear: both;"></div>
    <van-popup
      :show="show"
      position="bottom"
      :overlay="false"
      bind:close="onClose"
    >
      <van-area :area-list="areaList" @confirm="closeArea" :columns-num="3" value="110101" @change="onchange" placeholder="请先选择地区"/>
    </van-popup>
    <button @click="saveMes" v-if="btnShow" style="margin-top: 10vw">保存</button>
    <button v-else style="margin-top: 10vw">保存</button>
  </div>
</template>

<script>
  import address from "@/actions/area.js"
  import request from "@/actions/request.js"
  export default {
    name: "addAddress",
    components: {
    },
    data() {
      return {
        btnShow:true,
        show:false,
        data:{},
        chosenAddressId: '1',
        list: [],
        areaList:address.areas,
        first_id:'',
        second_id:'',
        third_id:'',
        address:'',
        searchResult: [],
        addressInfo:{
        },
        name:'',
        phone:'',
        area:"",
        detail:''
      }
    },
    onShow(){
      this.btnShow = true;
      this.show = false,
      this.name='',
      this.phone='',
      this.area="",
      this.detail='',
      this.list = []
    },
    watch:{
    },
    methods:{
      closeArea(){
        this.show= false
      },
      onchange(picker){
        let val = picker.target.values;
        let arr = [];
        val.forEach((value,index)=>{
          arr.push(value.name)

        })
        this.first_id = val[0].code;
        this.second_id = val[1].code;
        this.third_id = val[2].code;
        this.area = arr.join("/");
      },

      areaSelect(){
        this.show=true;
      },
      saveMes(){

        if (this.name == null) {
          wx.showToast({
            title:'请输入您的姓名',
            duration:1500
          })
        }else if (!(/^1\d{10}$/.test(this.phone))){
          wx.showToast({
            title:'请输入正确格式的手机号',
            icon:'none',
            duration:1500
          })
        }else if (this.detail == null) {
          wx.showToast({
            title:'请输入您的详细地址',
            duration:1500
          })
        }else{
          request.addAddress('api/user/addAddress','post',{
            first_id:this.first_id,
            second_id:this.second_id,
            third_id:this.third_id,
            accept_name:this.name,
            phone:this.phone,
            address:this.detail
          },{},true,this)
          this.btnShow = !this.btnShow;
        };
      },
      changeArea(values){
        this.first_id=values[0].code;
        this.second_id=values[1].code;
        this.third_id=values[2].code;
      },
      onSave() {

      },
      onDelete() {

      },
    },
    mounted() {

     /* this.first_id=this.$route.query.first_id,
        this.second_id=this.$route.query.second_id,
        this.third_id=this.$route.query.third_id,
        document.querySelector('input[type=tel]').setAttribute("maxLength", 11);
      if(this.$route.query.addressId){
        this.addressInfo={
          name:this.$route.query.name,
          tel:this.$route.query.tel,
          addressDetail:this.$route.query.address,
          areaCode:this.$route.query.area,
          isDefault:!!(Number(this.$route.query.is_default)),
        }
      }*/
    },
  }
</script>

<style scoped lang="scss">
.addAddress{
  font-size: 16px;
  color: #333;
  ul{
    background: #fff;
    li{
      height: 10vw;
      border-bottom: 1px solid #f5f5f5;
      padding-left: 4vw;
      span{
        width: 19vw;
        text-align: left;
        display: inline-block;
        line-height: 10vw;
        float: left;
      }
      input{
        display:inline-block;
        height: 100%;
        float: left;
        width: 65vw;
      }
    }
  }
}
</style>
